---
export interface Props {
  href: string;
  className?: string;
  ariaLabel?: string;
  title?: string;
  disabled?: boolean;
  postion?: string;
}

let { href, className, ariaLabel, title, disabled = false ,postion = 'bottom' } = Astro.props;
href = href.indexOf("http") !== -1 ? href : import.meta.env.BASE_URL + href;
---

<a
  href={disabled ? "#" : href}
  tabindex={disabled ? "-1" : "0"}
  class={`group inline-block ${className}`}
  aria-label={ariaLabel}
  aria-disabled={disabled}
  data-te-toggle="tooltip"
  data-te-placement={postion}
  data-te-ripple-init
  data-te-ripple-color="dark"
  data-te-html="true"
  data-astro-prefetch
  title={title === "Search"
    ? "<em>ctrl</em> + <em>k</em>"
    : title}
>
  <slot />
</a>

<style>
  a {
    @apply hover:text-skin-accent;
  }
</style>
